<template>
  <Row>
    <Col span="24">
      <BaseTable :columns="columns" :data="data" op check @add="addHandler" @update="updateHandler" @delete="deleteHandler" @refresh="getAll" 
      @set="setHandler"></BaseTable>
      <Modal v-model="modalFlag" title="项目信息" @on-ok="asyncOK" @on-cancel="asyncCancel">
        <Form ref="form" :model="formItem" :rules="rules" label-position="left">
            <FormItem label="项目名称" prop="Name">
                <Input type="text" v-model="formItem.Name" >
                </Input>
            </FormItem>
            <FormItem label="备注" prop="Remark">
                <Input type="textarea" v-model="formItem.Remark" ></Input>
            </FormItem>
        </Form>
      </Modal>
    </Col>
  </Row>
</template>

<script>
  import BaseTable from '@c/table/table.vue';
  export default {
    name: 'SchoolDeclare',
    data () {
      return {
        columns: [
          {
            title: ' ',
            type: 'selection'
          },
          {
            // title: ' ',
            type: 'index'
          },
          {
            title: '标题',
            key: 'Name'
          },
          {
            title: '类型',
            key: 'Type',
            render: (h, { row }) => {
              return h('span', {}, row['Type'] === 0 ? '校级项目' : '院系项目');
            }
          },
          {
            title: '备注',
            key: 'Remark',
            ellipsis: true,
            tooltip: true
          }
        ],
        data: [],
        modalFlag: false,
        formItem: {},
        rules: {
          Name: [
            { required: true, message: '请填写项目标题', trigger: 'blur' }
          ],
          Remark: []
        },
        isAdd: false
      };
    },
    components: {
      BaseTable
    },
    methods: {
      getAll () {
        this.$api.GetSchoolSequence().then((res) => {
          // console.log(res);
          this.data = res.Data;
        }).catch((err) => {
          if (err) {
            this.$Message.error(err);
          }
        });
      },
      asyncOK () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            // this.$Message.info('验证通过');
            if (this.isAdd) {
              this.formItem.Type = 0;
              this.$api.AddSequence(this.formItem).then(res => {
                this.$Message.success('操作成功！');
                this.getAll();
                this.$refs['form'].resetFields();
              }).catch(err => {
                if (err) {
                  this.$Message.error(err);
                }
              });
            } else {
              this.$api.UpdateSequence(this.formItem).then((res) => {
                this.$Message.success('操作成功！');
                this.getAll();
                this.$refs['form'].resetFields();
              }).catch((err) => {
                if (err) {
                  this.$Message.error(err);
                }
              });
            }
          } else {
            this.$Message.warning('请补充信息！');
          }
        });
      },
      asyncCancel () {
        this.$refs['form'].resetFields();
        this.getAll();
      },
      addHandler () {
        this.modalFlag = true;
        this.isAdd = true;
      },
      updateHandler (rows) {
        // console.log(rows);
        if (Array.isArray(rows) && rows.length === 1) {
          this.formItem = rows[0];
          this.isAdd = false;
          this.modalFlag = true;
        } else {
          this.$Message.warning('请选择一条数据操作！');
        }
      },
      deleteHandler (rows) {
        // DeleteListSequence
        if (Array.isArray(rows) && rows.length > 0) {
          this.$Modal.confirm({
            title: '操作确认',
            content: '删除后可能会影响其它功能使用，确认删除选中的数据吗？',
            onOk: () => {
              this.$api.DeleteListSequence(rows).then((res) => {
                this.$Message.success('操作成功！');
                this.getAll();
              }).catch((err) => {
                if (err) {
                  this.$Message.error(err);
                }
              });
            }
          });
        } else {
          this.$Message.warning('请选择至少一条数据操作！');
        }
      },
      setHandler (rows) {
        console.log(rows); 
        if (Array.isArray(rows) && rows.length === 1) {
          console.log(rows[0]);
          this.$router.push({
            name: '项目参数设置',
            params: {
              sequence: rows[0]
            }
          });
        } else {
          this.$Message.warning('请选择一条数据操作！');
        }
      }
    },
    mounted () {
      this.getAll();
    }
  };
</script>

<style scoped>

</style>